<template>
  <div class="qrcode-form-page">
    <div id="loginQrCode"
         v-show="!loading"
         ref="loginQrCode" :class="{'qrcode-model':showTimeOut}">
    </div>
    <div class="shou-loading" v-show="loading">
      <Spin fix>
        <Icon type="close"></Icon>
        <div>加载中....</div>
      </Spin>
    </div>
    <div class="fugai" v-show="showTimeOut" @click="createQrcode">
        二维码已过期
        </br>
        点击重新生产
    </div>
    <Modal title="选择登录账号" v-model="moreUserShow" width="400" :mask-closable="false">
      <div>
        <Radio-group @on-change="changeLoginUser" vertical>
          <Radio :label="item.login_name" :disabled="(item.login_flag!=='1' ||item.state==='2')" v-for="(item,index) in moreUserList" :key="index">
            <span>{{item.login_name}}</span>
            <span style="color: red" v-show="item.login_flag!=='1'">【账号被禁用】</span>
            <span style="color: red" v-show="item.state==='2'">【扫码登录被禁用】</span>
          </Radio>
        </Radio-group>
      </div>
      <div slot="footer">
          <Button type="primary" @click="moreUserShow = false" :loading="modalButtonObj.loading">{{buttonTitle}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import QRcode from 'qrcodejs2'
import { getLoginQrcode, qrcodeLogin } from '../../api/user'
export default {
  name: 'QrcodeForm',
  data () {
    return {
      timeout: 60,
      loading: true,
      qrcodeUrl: '',
      t: null,
      moreUserShow: false,
      modalButtonObj: {
        loading: false
      },
      moreUserList: [],
      sstuuid: '',
      appid: ''
    }
  },
  props: {
    openQrcode: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  computed: {
    showTimeOut () {
      if (this.timeout <= 0) {
        return true
      } else {
        return false
      }
    },
    buttonTitle () {
      return this.modalButtonObj.loading === true ? '登录中' : '关闭'
    }
  },
  methods: {
    bindingUser (text) {
      this.$refs.loginQrCode.innerHTML = ''
      let qrcode = new QRcode('loginQrCode', {
        width: 200,
        height: 200, // 高度
        text: text, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000000', // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log(qrcode)
    },
    createQrcode () {
      this.loading = true
      getLoginQrcode().then(ret => {
        this.loading = false
        if (ret.data.errcode === 0) {
          const url = ret.data.data.url
          this.qrcodeUrl = url
          this.timeout = ret.data.data.timeout
          this.bindingUser(url)
          this.runTimeOut()
        } else {
          alert('接口返回的数据不正确')
        }
      })
    },
    async loginQrcodAction () {
      let query = this.$common.xeUtils.parseUrl(this.qrcodeUrl)
      let params = { appid: query.hashQuery.url_key, sstuuid: query.hashQuery.sst_uuid }
      this.sstuuid = query.hashQuery.sst_uuid
      this.appid = query.hashQuery.url_key
      let result = await qrcodeLogin(params)
      // console.log(result.data, '21')
      result = result.data
      if (result.errcode === 9098) {
        this.$Message.error({ content: '您的app没有绑定登录账号！', duration: 4 })
        this.timeout = -1
        clearInterval(this.t)
      } else if (result.errcode === 9066) {
        // 多个账号的情况
        clearInterval(this.t)
        this.moreUserShow = true
        this.moreUserList = result.data
      } else if (result.errcode === 0) {
        clearInterval(this.t)
        this.$emit('qrcodeSuccess', { token: result.key })
      }
    },
    runTimeOut () {
      this.t = setInterval(() => {
        this.timeout--
        this.loginQrcodAction()
        if (this.timeout < 0) {
          clearInterval(this.t)
        }
      }, 1000)
    },
    async  changeLoginUser (loginName) {
      this.modalButtonObj.loading = true
      let params = {
        loginName: loginName,
        sstuuid: this.sstuuid,
        appid: this.appid
      }
      let result = await qrcodeLogin(params)
      result = result.data
      if (result.errcode === 0) {
        this.modalButtonObj.loading = false
        this.moreUserShow = false
        this.$emit('qrcodeSuccess', { token: result.key })
      } else {
        this.$Message.error({ content: result.errmsg, duration: 4 })
      }
    }
  },
  watch: {
    openQrcode (data) {
      if (data === false) {
        this.createQrcode()
      } else if (data === true) {
        clearInterval(this.t)
      }
    }
  }
}
</script>

<style scoped>
.qrcode-form-page{
  position: relative;
}
.qrcode-model{
  filter: brightness(0.5);
}
.fugai{
  position: relative;
  top: -110px;
  text-align: center;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.shou-loading{
  width: 200px;
  height: 200px;
  border: 1px solid #a9b7be;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
</style>
